Días ha que escribí una nota sobre los eventos en jQuery. Y hora es de ampliar dicho artículo con las novedades que la serie 1.2 de jQuery añade al respecto.
Lo de siempre
Recordemos las bases de la asignación y el manejo de eventos en jQuery. La forma básica de asignar un manejador es la siguiente:
$('un.selector')
.bind('click', unaFuncion);
El manejador (unaFuncion) recibe como parámetro el objeto que representa el evento (normalizado para tener acceso común a sus propiedades en los distintos navegadores). La función se ejecuta en el contexto del elemento al que se ha asignado el manejador.
function unaFuncion(e) {
console.log('Contexto', this);
console.log('Evento', e);
}
$('un.selector')
.bind('click', unaFuncion);
Lo nuevo
Con jQuery 1.2 podemos asignar un manejador para varios eventos con una sola llamada a bind(). Utilizamos para ello una lista de nombres de evento separados por espacios. Observa que en el manejador tomamos una decisión basada en la propiedad type del objeto del evento.
function handle(e) {
var $label = $(this).prev();
if (e.type == 'focus') {
$label.hide();
}
else if (this.value == '') {
$label.show();
}
}
$('#login input')
.filter('[type=text], [type=password]')
.bind('focus blur', handle);
Otra novedad interesante es la pseudonombrespaciación de eventos, que se puede practicar utilizando el nombre del evento seguido de un punto y un identificador arbitrario al asignar el manejador.
Y esto, ¿para qué? Para facilitar la eliminación de grupos de manejadores.
// en algún lugar del código de un drag'n'drop
$(document)
.bind('mousemove.rock_n_roll', some_handler)
.bind('mouseup.rock_n_roll', mouseup_handler);
// en el código de finalización del arrastre
$(document)
.unbind('.rock_n_roll');
Y algo que no es exactamente nuevo pero mola todo y se conoce poco: podemos pasar un objeto de datos en la asignación. El manejador lo recibirá en la propiedad data del evento.
function handle_click(e) {
alert(e.data.foo);
}
$.fn.somePlugin(opts) {
var settings = $.extend({
foo: 'bar'
});
this.bind('click', settings, handle_click);
return this;
}
// mostrará "bar" al activar los enlaces
// con clase "tigre"
$('a.tigre').somePlugin();
// mostrará "tolo" al activar los enlaces
// con clase "leon"
$('a.leon').somePlugin({ foo: 'tolo' });
Por último, se incorpora a la API el método triggerHandler que complementa a trigger. La diferencia: triggerHandler dispara los manejadores asignados al evento pero no ejecuta las acciones por defecto del navegador.
Para más y mejor información y, de paso, practicar el inglés: Release: jQuery 1.2/Events.
Mike Alsup, autor de jQuery form plugin y otras delicias, nos explica cómo crear un plugin para jQuery que cumpla con las condiciones de: no contaminar el espacio de nombres, acepte opciones (y las extienda), mantenga los límites adecuados entre lo público y lo privado y saque provecho del plugin de metadatos. Ahí es nada: A Plugin Development Pattern.
No sé si se notará mucho, pero estos últimos días me estoy metiendo hasta las trancas en el mundo de Dojo. Y claro, cuando encuentro información interesante, se me despierta una especie de espíritu bloguero que me incita a compartir enlaces. La lección de hoy: Dojo Custom Widget Tutorial.
Christian Heilmann, en su cruzada a favor del scripting no intrusivo, nos presenta un tutorial de lo más completo para crear un slideshow fácil de mantener. No utiliza efectos wow, ni falta que hace: A detailed explanation how to create a maintainable dynamic slide show in JavaScript.
Scott Andrew LePera –el hombre detrás del primer addEvent– se ha propuesto escribir el tutorial que a él le hubiera gustado tener a mano cinco años atrás. En el primer artículo de la serie How to build a simple calendar with JavaScript nos explica cómo pintar un calendario de forma sencilla y sin bibliotecas de por medio.
Los fantasmas del pasado y el presente del scripting se dan cita en A Scripting Carol, de Derek Featherstone, publicado en 24 ways. Un bonito (y navideño) cuento sobre los malos usos que llevaron javascript al calabozo de los lenguajes y sugerencias para hacerlo bien hoy, mañana y pasado.
La realización de interfaces «ricas» y accesibles es todo un arte que muy pocos practican. James Edwards nos da algunos buenos consejos en Accessible JavaScript: Beyond the Mouse. Recuerda joven: debes permitir la navegación con teclado.
No todos los navegadores pueden tragar con todos los métodos del DOM, algunos implementaciones de ECMAScript presentan curiosos bugs… Como más vale prevenir que curar, antes de lanzarse a la aventura es necesario comprobar las capacidades del navegador. Pero ojo, no se trata de averiguar qué navegador, sino qué capacidades. Aprende buenos modales en Using capability detection.
Supongamos una linda interfaz en la que algunos elementos no se muestran hasta que el usuario realiza alguna acción. Supongamos que somos hombres de buen corazón y queremos que nuestra aplicación sea accesible sin necesidad de javascript.
- Si ocultamos esos elementos mediante CSS, quien no tenga javascript no tendrá, jamás de los jamases, acceso a ellos.
- Si ocultamos los elementos mediante javascript, se producirá algún que otro feo parpadeo (y si son muchos los elementos a ocultar, aumentará el tiempo de proceso).
Veamos cómo podemos evitar ambos problemas con una pequeña combinación de CSS y scripting. Continúa leyendo Ocultar elementos por CSS si y solo si disponemos de javascript
Aunque el artículo sea de 2005, las buenas prácticas que recomienda son y serán válidas por mucho tiempo: Ten good practices for writing JavaScript in 2005.